import { Tabs } from 'antd';
import styles from './index.less';
import { Basic } from '@/pages/workflow/model/components/modeler/properties/basic';
import { ModelerService } from '@/pages/workflow/model/components/modeler/ModelerService';
import { Candidate } from '@/pages/workflow/model/components/modeler/properties/candidate';
import { Condition } from '@/pages/workflow/model/components/modeler/properties/condition';
import { Data } from '@/pages/workflow/model/components/modeler/properties/data';
import { ActiveForm } from '@/pages/workflow/model/components/modeler/properties/form';
import { Event } from '@/pages/workflow/model/components/modeler/properties/event';

export const Properties = (props: { modelerService: ModelerService }) => {

  const items = [
    {
      key: 'basic',
      label: '基本信息',
      disabled: props.modelerService.element === undefined,
      children: <Basic modelerService={props.modelerService} />,
    },
    {
      key: 'candidate',
      label: '操作人',
      disabled: !props.modelerService.is(['bpmn:Process', 'bpmn:UserTask']),
      children: <Candidate modelerService={props.modelerService} />,
    },
    {
      key: 'condition',
      label: '流转条件',
      disabled: !props.modelerService.is(['bpmn:SequenceFlow']),
      children: <Condition modelerService={props.modelerService} />,
    },
    {
      key: 'data',
      label: '数据',
      disabled: !props.modelerService.is(['bpmn:Process']),
      children: <Data modelerService={props.modelerService} />,
    },
    {
      key: 'form',
      label: '表单',
      disabled: !props.modelerService.is(['bpmn:UserTask']),
      children: <ActiveForm modelerService={props.modelerService} />,
    },
    {
      key: 'event',
      label: '事件',
      disabled: !props.modelerService.is(['bpmn:Process']),
      children: <Event modelerService={props.modelerService} />,
    },
  ];

  return (
    <Tabs className={styles.properties} items={items} />
  );
};
